<template>
	<div>
		<div>
			<HeroTable
				:allowSelect="true"
				:data="tabData"
				:columns="columns"
				:pagination="paging"
				@select="handleSelect"
				@pagingChange="handlePagingChange"
			>
				<template v-slot:dateHeader>
					<el-tag type="success">窗口结束时间</el-tag>
				</template>
				<template v-slot:action="scope">
					<span class="btn" @click="handleCLick('edit', scope.data)">编辑</span>
				</template>
			</HeroTable>
		</div>
		<el-dialog
			title="提示"
			v-model="dialogVisible"
			width="30%"
			:before-close="handleClose">
			<span>这是一段信息</span>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="dialogVisible = false">取 消</el-button>
					<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script lang="ts">
import { defineComponent, getCurrentInstance, onMounted, onUpdated, reactive, ref, toRefs } from 'vue';
import { HeroTable } from '@/components';
import { ElMessage, ElMessageBox } from 'element-plus';
import { get } from '@/api/http';

export default defineComponent({
	// 广告数据统计页面
	name: 'Advertising',
	components: { HeroTable },
	props: {},
	setup () {
		const { ctx } = getCurrentInstance() as any;
		const tableData = reactive({
			tabData: []
		});
		// 分页对象ref
		const paging = ref({
			current: 1,
			size: 10,
			total: 10
		});
		const columns = [
			{
				prop: 'windowEnd',
				label: '窗口结束时间',
				fixed: true,
				width: 200,
				slot: {
					body: 'date',
					header: 'dateHeader'
				}
			},
			{
				prop: 'province',
				label: '省份'
			},
			{
				prop: 'cnt',
				label: '频次'
			}
		];
		const state = reactive({
			form: {
				user: '',
				grade: ''
			},
			dialogVisible: false
		});

		const methods = {
			handleSelect: (val) => {
				console.log(val);
			},
			handlePagingChange: (option) => {
				console.log(option);
				paging.value.current = option.val;
				get(`/blacklist-advertising/select/${paging.value.current}/${paging.value.size}`).then(res => {
					ElMessage.success('数据查询完成');
					const data = res.data.data;
					console.log(data);
					tableData.tabData = data.records;
					paging.value.current = data.current;
					paging.value.size = data.size;
					paging.value.total = data.total;
				}).catch(err => {
					ElMessage.error(err.message);
				});
			},
			onSubmit: () => {
				console.log('onSubmit');
				ElMessageBox.alert('', '', {
					title: '提示',
					message: 'This is a messageBox',
					type: 'warning',
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					showCancelButton: true
				});
			},
			handleCLick: (type, scope) => {
				console.log(type);
				if (type === 'edit') {
					state.dialogVisible = true;
				} else {
					ctx.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						ctx.$message({
							type: 'success',
							message: '删除成功!'
						});
					}).catch(() => {
						ctx.$message({
							type: 'info',
							message: '已取消删除'
						});
					});
				}
			},
			handleClose: () => {
				state.dialogVisible = false;
			}
		};

		onMounted(() => {
			get(`/blacklist-advertising/select/${paging.value.current}/${paging.value.size}`).then(res => {
				ElMessage.success('数据查询完成');
				const data = res.data.data;
				tableData.tabData = data.records;
				paging.value.current = data.current;
				paging.value.size = data.size;
				paging.value.total = data.total;
			}).catch(err => {
				ElMessage.error(err.message);
			});
		});

		return {
			...toRefs(tableData),
			...toRefs(state),
			paging,
			tableData,
			columns,
			...methods
		};
	}
});
</script>

<style scoped>

</style>
